<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>gamepic-test</title>
    <meta name="author" content="Vincent Garreau" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" media="screen" href="css/effects.css">
    <script src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
    <script src="js/stickyelements-animate.js"></script>
    <script src="js/ocanvas-2.8.5.min.js"></script>
    <style type="text/css" media="screen">
    #myCanvas {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        width: 100%;
        height: 100%;
    }
    </style>
</head>

<body>
    <!-- particles.js container -->
    <div id="particles-js">
    </div>
    <!--content start-->
    <canvas id="myCanvas" style="cursor: inherit;">
        您的浏览器不支持canvas！
    </canvas>
    <!-- scripts -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="../particles.js"></script>
    <script src="js/effects.js"></script>
    <script src="js/stickyelements-animate.js"></script>
    <script type="text/javascript">

    var bindResizeEvent = function() {
        window.addEventListener('resize', function(event) {
            resizeWindow()
        })
    }
    window.onload = function() {
        // canvas设置宽高
        window.addEventListener("myCanvas", resizeCanvas, false);

        function resizeCanvas() {
            w = canvas.width = document.body.clientWidth;
            h = canvas.height = document.body.clientHeight;
            console.log(h)
        }
    }

    var canvas = document.getElementById('myCanvas'); //获取canvas元素
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    var ctx = canvas.getContext('2d'), //获取画图环境，指明为2d
        centerX = canvas.width / 2, //Canvas中心点x轴坐标
        centerY = canvas.height / 2, //Canvas中心点y轴坐标
        rad = Math.PI * 2 / 9, //将360度分成100份，那么每一份就是rad度
        trad = rad * Math.PI / 180; //对应的弧度



    //吸附插件注册
    var plugin = function() {
        stickyElements('#myCanvas', {
            stickiness: 5,
            pointer: false
        });
    };
    // oCanvas.registerPlugin("myPlugin", plugin);

    //创建画布
    var canvas = oCanvas.create({
        canvas: "#myCanvas",
        plugins: ["myPlugin"]
    });

    //绘制白色中心圆
    var centerCircle = canvas.display.arc({
        x: centerX,
        y: centerY,
        radius: 60,
        start: 0,
        end: 360,
        stroke: "1px #fff"
    });
    canvas.addChild(centerCircle);

    // 绘制开始
    var dx = canvas.width / 2; //中心点横坐标
    var dy = canvas.height / 2; //中心点纵坐标
    var r = 60; //半径
    // var x = Math.sin(0);
    // var y = Math.cos(0);
    var dig = Math.PI * 2 / 9; //角度,整个圆分为9份
    for (var i = 0; i < 9; i++) {
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        var endX = dx + x * (r + 180); //绘制终点x坐标
        var endY = dy + y * (r + 180); //绘制终点y轴坐标

        //绘制发散线条
        var line = canvas.display.line({
            start: {
                x: dx + x * r,
                y: dy + y * r
            },
            end: {
                x: endX,
                y: endY
            },
            stroke: "0.5px #fff",
            currentPosition: "line-position"

        });
        canvas.addChild(line);


        //绘制文字
        var relationText = canvas.display.text({
            x: dx + x * (r + 80),
            y: dy + y * (r + 80),
            origin: {
                x: "left",
                y: "center"
            },
            font: "bold 12px sans-serif",
            text: "关系",
            fill: "#fff"
        });
        canvas.addChild(relationText);

        //绘制发散圆圈
        var roundCircle = canvas.display.arc({
            x: dx + x * (r + 180 + 35),
            y: dy + y * (r + 180 + 35),
            radius: 35,
            start: 0,
            end: 360,
            stroke: "1px #fff",
            currentPosition: "round-position"
        });
        canvas.addChild(roundCircle);

        //第一圈图片载入数组
        var images = new Array(i);
        var imagesSrc = new Array(i);
        images[i] = new Image();
        imagesSrc[i] = "img/" + [i + 1] + '.png';
        images[i].src = imagesSrc[i];
        //绘制图片
        var images = canvas.display.image({
            x: dx + x * (r + 180 + 35),
            y: dy + y * (r + 180 + 35),
            origin: {
                x: "center",
                y: "center"
            },
            image: images[i]
        });
        canvas.addChild(images);

        //小圆悬停变手型
        images.bind("mouseenter", function() {
            canvas.mouse.cursor("pointer");
        }).bind("mouseleave", function() {
            canvas.mouse.cursor("default");
        });
        // 第二圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈圈

        // 第二圈中间线条
        var centerLinee = canvas.display.line({
            start: {
                x: dx + x * r,
                y: dy + y * r
            },
            end: {
                // x: dx + x * (r + 400),
                // y: dy + y * (r + 400)
                x: dx + x * r,
                y: dy + y * r
            },
            stroke: "0.5px #fff",
            currentPosition: "line-position"
        });
        canvas.addChild(centerLinee);
        //第二圈中间圆圈
        var roundCirclee = canvas.display.arc({
            x: dx + x * (r + 180 + 35),
            y: dy + y * (r + 180 + 35),
            radius: 35,
            start: 0,
            end: 360,
            stroke: "1px rgba(255,255,255,0.5)",
            currentPosition: "round-position"
        });
        canvas.addChild(roundCirclee);
        //第二圈中间图片载入数组
        var cImagess = new Array(ii);
        var cImagessSrc = new Array(ii);
        cImagess[ii] = new Image();
        cImagessSrc[ii] = "img/" + [ii + 1] + '.png';
        cImagess[ii].src = cImagessSrc[ii];
        //绘制图片
        var cImagess = canvas.display.image({
            x: dx + x * (r + 400 + 35),
            y: dy + y * (r + 400 + 35),
            origin: {
                x: "center",
                y: "center"
            },
            image: cImagess[ii]
        });
        //         canvas.addChild(cImagess);
        //第二圈中间线条绘制文字
        var centerTextt = canvas.display.text({
            x: dx + x * (r + 350),
            y: dy + y * (r + 350),
            origin: {
                x: "left",
                y: "center"
            },
            font: "bold 12px sans-serif",
            text: "关系",
            fill: "#fff"
        });
        //        canvas.addChild(centerTextt);
        // 参数声明
        var a = dx + x * (r + 180 + 35); //中心点横坐标
        var b = dy + y * (r + 180 + 35); //中心点纵坐标

        var rr = 500; //半径
        var digg = Math.PI * 2 / 9; //角度,整个圆分为3份


        for (var ii = 0; ii < 9; ii++) {
            var xx = Math.sin(ii * digg);
            var yy = Math.cos(ii * digg);
            var endXX = a + xx * (rr); //绘制终点x坐标
            var endYY = b + yy * (rr); //绘制终点y轴坐标

            //第二圈右边线
            var rightLinee = canvas.display.line({
                start: {
                    x: dx + Math.sin((ii - 1) * digg) * (r + 180 + 35),
                    y: dy + Math.cos((ii - 1) * digg) * (r + 180 + 35)
                },
                end: {
                    x: dx + Math.sin((ii - 1) * digg) * (r + 180 + 35),
                    y: dy + Math.cos((ii - 1) * digg) * (r + 180 + 35)
                },
                stroke: "0.1px yellow",
                currentPosition: "linee-position"
            });
            canvas.addChild(rightLinee);

            //第二圈右边圆圈
            var rightCirclee = canvas.display.arc({
                x: dx + x * (r + 180 + 35),
                y: dy + y * (r + 180 + 35),
                //                x: dx + Math.sin((ii + 0.3) * (Math.PI * 2 / 9)) * (rr + 35),
                //                y: dy + Math.cos((ii + 0.3) * (Math.PI * 2 / 9)) * (rr + 35),
                radius: 35,
                start: 0,
                end: 360,
                stroke: "0.5px rgba(255,255,255,0.5)",
                currentPosition: "round-position"
            });
            canvas.addChild(rightCirclee);
            //第二圈右边图片载入数组
            var rImagess = new Array(ii);
            var rImagessSrc = new Array(ii);
            rImagess[ii] = new Image();
            rImagessSrc[ii] = "img/" + [ii + 1] + '.png';
            rImagess[ii].src = rImagessSrc[ii];
            //绘制图片
            var rImagess = canvas.display.image({
                x: dx + Math.sin((ii + 0.3) * (Math.PI * 2 / 9)) * (rr + 35),
                y: dy + Math.cos((ii + 0.3) * (Math.PI * 2 / 9)) * (rr + 35),
                origin: {
                    x: "center",
                    y: "center"
                },
                image: rImagess[ii]
            });
            //            canvas.addChild(rImagess);

            //第二圈右边线条绘制文字
            var rightTextt = canvas.display.text({
                x: dx + Math.sin((ii + 0.3) * (Math.PI * 2 / 9)) * (rr - 60),
                y: dy + Math.cos((ii + 0.3) * (Math.PI * 2 / 9)) * (rr - 60),
                origin: {
                    x: "center",
                    y: "center"
                },
                font: "bold 12px sans-serif",
                text: "关系",
                fill: "#fff"
            });
            //            canvas.addChild(rightTextt);

            //第二圈左边线
            var leftLinee = canvas.display.line({
                start: {
                    x: dx + Math.sin((ii - 1) * digg) * (r + 180 + 35),
                    y: dy + Math.cos((ii - 1) * digg) * (r + 180 + 35)
                },
                end: {
                    //                    x: dx + Math.sin((ii - 0.3-1) * (Math.PI * 2 / 9)) * rr,
                    //                    y: dy + Math.cos((ii - 0.3-1) * (Math.PI * 2 / 9)) * rr
                    x: dx + Math.sin((ii - 1) * digg) * (r + 180 + 35),
                    y: dy + Math.cos((ii - 1) * digg) * (r + 180 + 35)
                },
                stroke: "0.1px red",
                currentPosition: "linee-position"
            });
            canvas.addChild(leftLinee);

            //第二圈左边线条绘制文字
            var leftTextt = canvas.display.text({
                x: dx + Math.sin((ii - 0.3) * (Math.PI * 2 / 9)) * (rr - 60),
                y: dy + Math.cos((ii - 0.3) * (Math.PI * 2 / 9)) * (rr - 60),
                origin: {
                    x: "center",
                    y: "center"
                },
                font: "bold 12px sans-serif",
                text: "关系",
                fill: "#fff"
            });
            //            canvas.addChild(leftTextt);

            //第二圈左边圆圈
            var leftCirclee = canvas.display.arc({
                x: dx + x * (r + 180 + 35),
                y: dy + y * (r + 180 + 35),
                //                x: dx + Math.sin((ii - 0.3-1) * (Math.PI * 2 / 9)) * (rr+35),
                //                y: dy + Math.cos((ii - 0.3-1) * (Math.PI * 2 / 9)) * (rr+35),
                radius: 35,
                start: 0,
                end: 360,
                stroke: "0.5px rgba(255,255,255,0.5)",
                currentPosition: "round-position"
            });
            canvas.addChild(leftCirclee);

            //第二圈左边图片载入数组
            var imagess = new Array(ii);
            var imagessSrc = new Array(ii);
            imagess[ii] = new Image();
            imagessSrc[ii] = "img/" + [ii + 1] + '.png';
            imagess[ii].src = imagessSrc[ii];
            //绘制图片
            var imagess = canvas.display.image({
                x: dx + Math.sin((ii - 0.3) * (Math.PI * 2 / 9)) * (rr + 35),
                y: dy + Math.cos((ii - 0.3) * (Math.PI * 2 / 9)) * (rr + 35),
                origin: {
                    x: "center",
                    y: "center"
                },
                image: imagess[ii]
            });
            //             canvas.addChild(imagess);
        }


        //动画动画动画动画动画动画动画动画动画动画动画动画动画动画动画动画动画动画动画
        //悬停第一圈圆动画


        images.bind("mouseenter touchenter", function() {
            this.scale(2.25,2.25);
            //中间线动画
           centerLinee.animate({
                start: {
                    x: dx + x * r,
                    y: dy + y * r
                },
                end: {
                    x: dx + x * (r + 400),
                    y: dy + y * (r + 400)
                }
            }, {
                easing: "ease-in-out-back",
                callback: function() {
                    this.stroke = "0.5px #fff";
                    // canvas.redraw();
                }
            });
            //左边线动画
            leftLinee.animate({
                start: {
                    x: dx + Math.sin((ii - 1) * digg) * (r + 180 + 35),
                    y: dy + Math.cos((ii - 1) * digg) * (r + 180 + 35)
                },
                end: {
                    x: dx + Math.sin((ii - 0.3 - 1) * (Math.PI * 2 / 9)) * rr,
                    y: dy + Math.cos((ii - 0.3 - 1) * (Math.PI * 2 / 9)) * rr
                }
            }, {
                easing: "ease-in-out-back",
                callback: function() {
                    this.stroke = "1px red";
                }
            });
            //右边线动画
            rightLinee.animate({
                start: {
                    x: dx + Math.sin((ii - 1) * digg) * (r + 180 + 35),
                    y: dy + Math.cos((ii - 1) * digg) * (r + 180 + 35)
                },
                end: {
                    x: dx + Math.sin((ii + 0.3 - 1) * (Math.PI * 2 / 9)) * rr,
                    y: dy + Math.cos((ii + 0.3 - 1) * (Math.PI * 2 / 9)) * rr
                }
            }, {
                easing: "ease-in-out-back",
                callback: function() {
                    this.stroke = "1px yellow";
                    canvas.addChild(rImagess);
                }
            });
            //中间圆和img动画
            roundCirclee.animate({
                x: dx + x * (r + 400 + 35),
                y: dy + y * (r + 400 + 35),
                radius: 35,
                start: 0,
                end: 360,
                stroke: "1px #fff",
                currentPosition: "round-position"
            }, {
                easing: "ease-in-out-back",
                callback: function() {
                    this.stroke = "1px #fff";
                    canvas.addChild(cImagess);
                    canvas.addChild(centerTextt);
                }
            });
            //左边圆和img动画
            leftCirclee.animate({
                x: dx + Math.sin((ii - 0.3 - 1) * (Math.PI * 2 / 9)) * (rr + 35),
                y: dy + Math.cos((ii - 0.3 - 1) * (Math.PI * 2 / 9)) * (rr + 35),
                radius: 35,
                start: 0,
                end: 360,
                stroke: "1px #red",
                currentPosition: "round-position"
            }, {
                easing: "ease-in-out-back",
                callback: function() {
                    this.stroke = "1px red";
                    canvas.addChild(imagess);
                    canvas.addChild(leftTextt);
                }
            });

            //右边圆和img动画
            rightCirclee.animate({
                x: dx + Math.sin((ii + 0.3 - 1) * (Math.PI * 2 / 9)) * (rr + 35),
                y: dy + Math.cos((ii + 0.3 - 1) * (Math.PI * 2 / 9)) * (rr + 35),
                radius: 35,
                start: 0,
                end: 360,
                stroke: "1px #yellow",
                currentPosition: "round-position"
            }, {
                easing: "ease-in-out-back",
                callback: function() {
                    this.stroke = "1px yellow";
                    canvas.addChild(imagess);
                    canvas.addChild(rightTextt);
                }
            });

        });





        // //中心圆发散线的动画
        //    line.animate({
        //         start: {
        //            x: dx + x * r,
        //            y: dy + y * r
        //        },
        //        end: {
        //            x: endX,
        //            y: endY
        //        }
        //    }, {
        //        // easing: "ease-in-out-back",
        //        callback: function() {
        //            this.stroke = "1px #fff";
        //             this.fadeIn("short", "ease-in-out-back", function() {});
        //            canvas.redraw();
        //        }
        //    });
        // //圆的动画
        // roundCircle.animate({
        //     x: this.currentPosition === "round-position" ? centerX : centerX,
        //     y: this.currentPosition === "round-position" ? centerY : centerY
        // }, {
        //     easing: "ease-in-out-quint",
        //     callback: function() {
        //         this.fadeOut("short", "ease-in-out-cubic", function() {});
        //     }
        // });
        // //图片的动画
        // images.animate({
        //     x: this.currentPosition === "round-position" ? centerX : centerX,
        //     y: this.currentPosition === "round-position" ? centerY : centerY
        // }, {
        //     easing: "ease-in-out-quint",
        //     callback: function() {
        //         this.fadeOut("short", "ease-in-out-cubic", function() {});
        //     }
        // });
        // //关系文字的动画
        // relationText.animate({
        //     x: this.currentPosition === "round-position" ? centerX : centerX,
        //     y: this.currentPosition === "round-position" ? centerY : centerY
        // }, {
        //     easing: "ease-in-out-quint",
        //     callback: function() {
        //         this.fadeOut("short", "ease-in-out-cubic", function() {});
        //     }
        // });
    }
    </script>
</body>

</html>
